import { createRouter, createWebHistory } from 'vue-router'

const NamedView = () => import('views/route/NamedView.vue')
const First = () => import('views/route/First.vue')
const Second = () => import('views/route/Second.vue')
const Third = () => import('views/route/Third.vue')

const routes = [
  {path: '/', redirect: '/refdemo'},
  {path: '/refdemo', name: 'refdemo', title: 'ref函数演示', component: () => import('../views/ref_reactive/RefDemo.vue')},
  {path: '/reactivedemo', name: 'reactivedemo', title: 'reactive函数演示', component: () => import('../views/ref_reactive/ReactiveDemo.vue')},
  {path: '/setupdemo', name: 'setupdemo', title: 'setup函数演示', component: () => import('views/setup_test/setup.vue')},
  {path: '/computed', name: 'computed', title: 'computed函数演示', component: () => import('views/computed/computed.vue')},
  {path: '/watch', name: 'watch', title: 'watch函数演示', component: () => import('views/watch/watch.vue')},
  {path: '/watcheffect', name: 'watcheffect', title: 'watchEffect函数演示', component: () => import('views/watch/watchEffect.vue')},
  {path: '/stylebinding', name: 'stylebinding', title: '样式绑定(Class,Style)', component: () => import('views/styleBinding/StyleBinding.vue')},
  {path: '/hook', name: 'hook', title: 'hook演示', component: () => import('views/hook/hookDemo.vue')},
  {path: '/torefs', name: 'torefs', title: 'toRef, toRefs演示', component: () => import('views/toRef_s/toRefs.vue')},
  {path: '/shallow', name: 'shallow', title: 'shallow相关函数演示', component: () => import('views/shallow/shallow.vue')},
  {path: '/readonly', name: 'readonly', title: 'readonly相关函数演示', component: () => import('views/readonly/readonly.vue')},
  {path: '/raw', name: 'raw', title: 'toRaw,markRaw演示', component: () => import('views/raw/toMarkRaw.vue')},
  {path: '/customref', name: 'customref', title: 'customRef演示', component: () => import('views/customRef/customRef.vue')},
  {path: '/provideinject', name: 'provideinject', title: 'provide/inject演示', component: () => import('views/provideInject/parent.vue')},
  {path: '/teleport', name: 'teleport', title: 'teleport演示', component: () => import('views/teleport/parent.vue')},
  {path: '/suspense', name: 'suspense', title: 'suspense+异步组件', component: () => import('views/suspense/parent.vue')},
  {path: '/customevent', name: 'customevent', title: '自定义事件+emits', component: () => import('views/customEvent/CustomEventEmits.vue')},
  {path: '/customdirective', name: 'customdirective', title: '自定义指令', component: () => import('views/directive/CustomDirective.vue')},
  {path: '/namedviews', name: 'namedviews', redirect: '/namedviews/home', title: '命名视图+路由', component: () => import('views/route/NamedView.vue')},
  {path: '/namedviews/home', components: {
    default: NamedView,
    'one': Third,
    'two': First,
    'three': Second} },
  {path: '/namedviews/other', name: 'nameviewsother', components: {
    default: NamedView,
    'one': Second,
    'two': Third,
    'three': First} },
  {path: '/nestednamedviews', name: 'nestednamedviews', title: '嵌套命名视图+嵌套路由', component: () => import('views/route/NestedNamedViews.vue'),
    redirect: '/nestednamedviews/other',
    children: [
      {path: 'one', component: First},
      {path: 'other', components: {
        default: Second,
        other: Third
      }}
    ] },  
  {path: '/routequery', name: 'routequery', title: '路由Query参数演示', component: () => import('views/route/RouteQuery.vue'),
    redirect: '/routequery/home?msg=必须传入参数才行-重定向有麻烦了&type=classic',
    children: [
      {path: 'about', name: 'routequeryabout', component: ()=> import('views/route/RouteQueryAbout.vue')},
      {path: 'home', name: 'routequeryhome', props: route=>({msg: route.query.msg, type: route.query.type}), component: ()=> import('views/route/RouteQueryHome.vue')},
    ]},
  {path: '/routeparams', name: 'routeparams', title: '路由Params参数演示', component: () => import('views/route/RouteParams.vue'),
    redirect: {name: 'routeparamshome', params:{'msg': '传给测试主页的内容.', type: 'test'}},
    //redirect: '/routeparams/about/1234/白云居士',
    children: [
      {path: 'about/:usrid/:name?', name: 'routeparamsabout', component: ()=> import('views/route/RouteParamsAbout.vue')},
      {path: 'home', name: 'routeparamshome', props: route=>({msg: route.params.msg, type: route.params.type}), component: ()=> import('views/route/RouteParamsHome.vue')},
    ]},
  {path: '/routealive', name: 'routealive', title: '缓存路由组件+新hook', component: ()=> import('views/route/RouteAlive.vue'),
    children: [
      {path: 'first/:hook?', component: First, props: true},
      {path: 'other/:hook?', component: Second, props: true}
    ] },
  {path: '/navguard', name: 'navguard', title: '各种路由导航守卫演示', component: ()=> import('views/navGuard/NavigationGuards.vue'),
    children: [
      {path: 'home', component: ()=> import('views/navGuard/Home.vue')},
      {path: 'msg', component: ()=> import('views/navGuard/Message.vue'),
          beforeEnter: (to, from) => {
            console.log('@@@ beforeEnter -- 路由独享的守卫', 'to:', to.path, 'from:', from.path)
          }}
    ] },
  {path: '/routetransit', name: 'routetransit', title: '路由过渡动效演示', component: ()=> import('views/transition/RouteTransition.vue'),
    children: [
      {path: 'demo', 
        meta: {transition: 'slide-left'},
        component: () => import('views/transition/Demo.vue'),
        props: true},
      {path: 'other',
        component: Third}
    ] },
  {path: '/transition', name: 'transition', title: '过渡及动画演示', component: () => import('views/transition/Transition.vue')},
  {path: '/transitmode', name: 'transitmode', title: 'vue过渡模式演示', component: () => import('views/transition/TransitionMode.vue')},
  {path: '/vuexdemo', name: 'vuexdemo', title: 'Vuex 演示', component: () => import('views/vuex/vuexDemo.vue')},
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
